<script setup lang="ts">
//footer图标
const active1:Ref<number> = ref(0);
import { ref } from 'vue';
import type{ Ref } from 'vue';

import home2 from '../assets/home/首页2.png'
import home1 from '../assets/home/首页.png'
import search2 from '../assets/home/搜索2.png'
import search1 from '../assets/home/搜索.png'
import collection2 from '../assets/home/收藏2.png'
import collection1 from '../assets/home/收藏.png'
import my2 from '../assets/home/我的2.png'
import my1 from '../assets/home/我的.png'
const icon = {
    active: home2,
    inactive: home1,
};
const icon1 = {
    active: search2,
    inactive: search1
};
const icon2 = {
    active: collection2,
    inactive: collection1

};

const icon3 = {
    active: my2,
    inactive: my1,
};
import { useRouter } from 'vue-router';
const router = useRouter()

function activeClick(index: number) {
    if (index == 1) {
        active1.value = 0
        // router.push('/home')
    } else if (index == 2) {
        active1.value = 1
        // router.push('/search')
    } else if (index == 3) {
        active1.value = 2
        // router.push('/collection')
    } else if (index == 4) {
        active1.value = 3
        // router.push('/my')
    }
    console.log(active1.value);
    
}
</script>
<template>
    <div class="ff">
        <footer>
            <van-tabbar v-model="active1" route :placeholder="true">
                <van-tabbar-item @click="activeClick(1)" to="/home">
                    <template #icon="props">
                        <img :src="props.active ? icon.active : icon.inactive" />
                    </template>
                    <span style="display: block;">首页</span>
                </van-tabbar-item>
                <van-tabbar-item @click="activeClick(2)" to="/search">
                    <template #icon="props1">
                        <img :src="props1.active ? icon1.active : icon1.inactive" />
                    </template>
                    <span style="display: block;">搜索</span>

                </van-tabbar-item>
                <van-tabbar-item @click="activeClick(3)" to="/collection">
                    <template #icon="props2">
                        <img :src="props2.active ? icon2.active : icon2.inactive" />
                    </template>
                    <span style="display: block;">收藏</span>

                </van-tabbar-item>
                <van-tabbar-item @click="activeClick(4)" to="/my">
                    <template #icon="props3">
                        <img :src="props3.active ? icon3.active : icon3.inactive" />
                    </template>
                    <span style="display: block;">我的</span>

                </van-tabbar-item>
            </van-tabbar>

        </footer>
    </div>
</template>
<style scoped lang="scss">
.ff {
    height: 50px;
}</style>